<template>
  <div>
    <div id="background">
      <div class="container">
        <form action="">
          <h1>---登 录---</h1>
          <div class="form">
            <div class="item">
              <label>用户名: </label><input type="text" name="username" v-model.trim="name" placeholder="请输入用户名">
              <!-- v-model把输入的值传输给name变量 -->
              <br/>
            </div>
            <div class="item">
              <label>密码: </label><input type="password" name="password"
                                         autocomplete="off"
                                         v-model.trim="password"
                                         placeholder="请输入密码">
              <br/>
            </div>
          </div>

        </form>
        <button  type="submit" @click.prevent="handlelogin">登录			</button>
        <!-- v-on点击按钮触发handlelogin方法 -->
        <button  @click.prevent="handleregister">注册</button>
      </div>
    </div>
  </div>
</template>
<!--js-->
<script>
  // 传参
  export default {
    name: 'SeismLogin',
    data(){
      return{
        name: "",//姓名，用v-model绑定监听，将输入的字符串赋值给name变量
        password: "",//密码
        st: "false",//false为不保存登录
      }
    },
    methods: {
      open1(msg) {
        this.$notify({
          title: msg,
          message: '这是一条成功的提示消息',
          type: 'success'
        });
      },
      open2(msg) {
        this.$notify({
          title: msg,
          message: '这是一条警告的提示消息',
          type: 'warning'
        });
      },
      open4(msg) {
        this.$notify.error({
          title: msg,
          message: '这是一条错误的提示消息'
        });
      },
      setName() {
        return this.name;
      },
      handlelogin() {

        this.$axios.post('/api/users/login', {
          "userName": this.name,
          "userPws": this.password
        }).then(res =>{
          if(res.data.code === 20041) {
            console.log(this.setName())
            sessionStorage.setItem('name', this.setName());
            this.handlesave(); // 保留登录状态
            this.$router.replace('/index/map');//如果输入的名字以及密码正确路由跳转至个人页面
            this.open1('登录成功!');
          }else {
            this.open2('账号不存在，请注册后登录');//查无此号
            this.name = '';
            this.password = '';
          }
        }).catch(error =>{
          // TODO 待更改
          sessionStorage.setItem('name', this.setName());
          this.$router.replace('/index/map');//如果输入的名字以及密码正确路由跳转至个人页面
          console.log(error)
          this.handlesave(); // 保留登录状态
          this.open4("系统出错了")
        })

        if(this.name=== '')//名字为空
        {
          this.open4('用户名不为空');
        }
        else if(this.password === '')//密码为空
        {
          this.open4('密码不为空');
        }
      },
      handleregister() {
        this.$router.replace('/register')//点击注册按钮，跳转至注册页面
      },
      //点击保持登录状态触发handlesave
      handlesave(){
        this.st="true";//修改登录状态为true
        sessionStorage.setItem('s',this.st);
        console.log(sessionStorage.s);
      },
    }
  }
</script>

<!--css-->
<style scoped>
@import "../assets/css/SeismLogin.css";
</style>